<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <style>
      html, body, .map {
          height: 100%;
          width: 100%;
          padding: 0;
          margin: 0;
          overflow: hidden;
      }
  </style>
  <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=c002f8d098d53ba8815a61fd11b67627"></script>
</head>
<body>
<div class="map" id="map"></div>
<script>
    var tile = new AMap.TileLayer({
        getTileUrl: 'https://b.tile.openstreetmap.org/[z]/[x]/[y].png'
    });
    var map = new AMap.Map('map', {
        center: [103.572, 36.897],
        layers: [
            // tile
            // new AMap.TileLayer.Satellite(),
            new AMap.TileLayer.RoadNet()
        ],
        zooms: [2,18],//设置地图级别范围
        zoom: 4
    });
</script>
</body>
</html>